<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{main.title}"></title>


    <script th:inline="javascript" >
        let _gridWidth;
        function resizePageSize() {
            _gridWidth = $(document).width();/* -189 是去掉左侧 菜单的宽度， -12 是防止浏览器缩小页面 出现滚动条 恢复页面时 折行的问题 */
            const _gridHeight = $(document).height() - 100; /* -32 顶部主菜单高度， -90 查询条件高度*/
            $("#mainFrame").css("height",_gridHeight - 15+ "px");
        }
        $(function () {
            resizePageSize();
        });//ready

        $(function () {
            //用户信息按钮点击事件
            $("#user-info-btn-id").click(function (event) {
                event.stopPropagation();
                $("#user-info-ul-id").removeClass("user-drop-down");
            });
            //点APP隐藏用户信息点击事件
            $("#app").click(function () {
                $("#user-info-ul-id").addClass("user-drop-down");
            });
            //系统菜单点击事件
            $("#system-menu-ul-id > li").click(function (){
                $("#system-menu-ul-id > li").removeClass("active")
                $(this).addClass("active")

                $("#server-nav-ul-id > ul").removeClass("in active")
                const tableId = $(this).attr("tabled")
                $("#" + tableId).addClass("in active")
            });
            // 第一个菜单点击动作
            $("#system-menu-ul-id > li:first > a").click();

            $("#server-nav-ul-id > ul > li > a").click(function () {
                const openFlag = $(this).attr("openFlag")
                const i = $(this).find(".open-icon")
                const ul = $(this).parent().find(".server-menu-2")
                i.removeClass("fa-folder-open-o fa-folder")
                if (openFlag === 'true') {
                    $(this).attr("openFlag","false")
                    i.addClass('fa fa-folder')
                    ul.css("display","none")
                } else {
                    $(this).attr("openFlag","true")
                    i.addClass("fa fa-folder-open-o")
                    ul.css("display", "")
                }
            });

            //修改密码对话框
            $("#modify-password-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{main.user.modify.password.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            const flag = $("#modify-password-dialog-form input.form-control").verification();
                            if(!flag){
                                return;
                            }
                            const newPasswd = $("#modify-new-password-id").val();
                            const confirmPasswd = $("#modify-confirm-password-id").val();
                            if(newPasswd !== confirmPasswd){
                                $("#modify-new-password-id").addClass( "ui-state-error").focus();
                                return;
                            }
                            // message("修改密码")
                            $("#modify-password-dialog-form").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });// end 修改密码对话框
            //修改密码按钮
            $("#modify-password-btn-id").click(function () {
                $("#modify-password-dialog-id").dialog('open');
            });//end
            //修改密码表单初始化
            $("#modify-password-dialog-form").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg)
                    if (data.success) {
                        $("#modify-password-dialog-id").dialog('close')
                        $("#modify-password-dialog-form").resetForm()
                    } else {
                        $("#modify-old-password-id").addClass("ui-state-error").focus()
                    }

                },
                error: function () {
                    message(/*[[#{common.error}]]*/)
                }
            })
        });

    </script>
    <style>
        .main-head {
            flex-basis: 50px;
            /*background-color: #00b1ef;*/
            display: flex;
            align-items: center;
        }
        .head-img {
            flex-grow: 1;
        }
        .system-menu {
            flex-basis: 50px;
            /*background-color: #2f332a;*/
        }
        .server-menu {
            flex-basis: 150px;
            /*background-color: #8c8c8c;*/
        }
        .main-middle {
            flex-grow: 1;
            display: flex;
            flex-direction: row;
            /*background-color: #00B83F;*/
        }
        .middle-contents {
            flex-grow: 1;
            /*background-color: #255625;*/
        }
        .user-info-nav {
            position: absolute;
            right: 29px;
            top: 25px;
            width: 250px;
            text-align: center;
        }
        .gd-user-info{
            background-color: #FFFFFF;
            border: 1px solid #999999;
            padding: 5px 10px;
        }
        .user-drop-down {
            display: none;
        }
        .server-menu-2 {
            padding-left: 10px;
        }
        .server-menu-1 > li > .btn,
        .server-menu-2 > li > .btn {
            text-align: start !important;
        }
        .server-menu-1.fade.in {
            display: unset !important;
        }
        .server-menu-1.fade {
            display: none !important;
        }
        .head-lang{
            flex-basis: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .head-lang > a{
            padding: 5px;
        }


    </style>

</head>
<body>
<div id="app">
    <header class="main-head">
        <div class="head-img">
            <img th:if="${session.siteLanguage} eq 'en'"
                 th:src="@{/assets/images/logo_en.png}" alt="logo">
            <img th:if="${session.siteLanguage} ne 'en'"
                 th:src="@{/assets/images/logo_zh.png}" alt="logo">
        </div>
        <div class="head-lang">
            <a th:href="@{/(siteLanguage=en)}" th:text="#{login.english}"></a>
            <a th:href="@{/(siteLanguage=zh)}" th:text="#{login.chinese}"></a>
        </div>
        <nav class="user-info-nav">
                    <a id="user-info-btn-id" class="btn">
                        <i class="glyphicon glyphicon-user"></i>
                        <span sec:authentication="principal.niceName"></span>
                    </a>
            <ul id="user-info-ul-id" class="user-drop-down gd-user-info nav navbar-btn">
                <li class="gd-item-li-hidden">

                    <a class="btn">
                        <i class="glyphicon glyphicon-home"></i>
                        <span th:text="#{main.user.modify}"></span>
                    </a>
                </li>
                <li class="gd-item-li-hidden">

                    <a class="btn" id="modify-password-btn-id">
                        <i class="glyphicon glyphicon-cog"></i>
                        <span th:text="#{main.passwd.modify}"></span>
                    </a>
                </li>
                <li class="gd-item-li-hidden">
                    <a class="btn" th:href="@{/logout}">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span th:text="#{login.logout}"></span>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <nav class="system-menu">
        <ul id="system-menu-ul-id" class=" gd-sys-menu nav nav-tabs">
            <li th:each="item : ${session.menu}" th:tabled="${'tab-' + item.menuId}">
                <a href="#" class="btn">
                    <i th:class="${item.menuIcon}" ></i>
                    <span th:text="${item.menuName}"></span>
                </a>
            </li>
        </ul>

    </nav>
    <section class="main-middle">
        <nav id="server-nav-ul-id" class="server-menu">
            <ul class="server-menu-1 nav navbar-btn fade tab-pane" th:each="item : ${session.menu}" th:id="${'tab-' + item.menuId}">
                <li th:each="item1 : ${item.childrenList}">
                    <a class="btn" openFlag = "true">
                        <i th:class="${'open-icon ' + item1.menuIcon}"></i>
                        <span th:text="${item1.menuName}"></span>
                    </a>
                    <ul class="server-menu-2 nav navbar-btn" th:each="item2 : ${item1.childrenList}">
                        <a target="main-iframe" class="btn" th:href="${item2.menuUrl}">
                            <i th:class="${item2.menuIcon}"></i>
                            <span th:text="${item2.menuName}"></span>
                        </a>
                    </ul>
                </li>
            </ul>
        </nav>
        <article class="middle-contents">
            <iframe name="main-iframe" style="border: none" width="100%" height="100%" th:src="@{/homePage}"></iframe>
        </article>
    </section>

</div>

<div id="modify-password-dialog-id" style="display: none">
    <form id="modify-password-dialog-form" th:action="@{/user/modifyPassword}" method="post">
        <div class="form-group">
            <span th:text="#{main.modify.old.password}"></span>
            <input id="modify-old-password-id" class="form-control" type="password" name="oldPassword" pattern="^.{1,8}$" th:title="#{main.password.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{main.modify.new.password}"></span>
            <input class="form-control" type="password" name="newPassword" id="modify-new-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
        </div>
        <div class="form-group">
            <span th:text="#{main.modify.confirm.password}"></span>
            <input class="form-control" type="password"  id="modify-confirm-password-id" pattern="^(?=.*[a-z,A-Z])(?=.*[0-9]).{1,8}$" th:title="#{main.password.pattern}">
        </div>
    </form>
</div>
</body>
</html>